<template>
	<view v-if="show">
		<view class="mask" @click="maskClose"></view>
		<view  :show="true" mode-class="zoom-in" >
			<view class="messBox":class="{'popup-content-show': popup_show}" >
				<view class="wrapBox">
					<view class="title" :style="{ color: titleColor}">{{ title }}</view>
					<view class="desc">
						<rich-text :nodes="content" :style="{ color: color}"></rich-text>
					</view> 
					<view class="btn" @click="btnClick" :class="{ baColor: btnBgColor}">我知道了</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
			},
			title: {
				type: String,
				default: '公告'
			},
			content: {
				type: String,
				default: '没有公告'
			},
			color: {
				type: String,
				default: '#000'
			},
			titleColor: {
				type: String,
				default: '000'
			},
			btnBgColor: {
				type: Boolean,
				default: true
			},
			tabbar: {
				type: Boolean,
				default: false, //是否有原生tabbar组件
			}
		},
		data() {
			return {
				viewObj: null, //原生遮罩view
				popup_show: false, // 弹窗动画
			};
		},
		async mounted() {
			this.viewObj = new plus.nativeObj.View('viewObj', {
				bottom: '0px',
				left: '0px',
				height: '50px',
				width: '100%',
				backgroundColor: "rgba(0,0,0,.2)"
			})
			this.viewObj.show()
			
			await this.$promise(300)
			this.popup_show = true
			console.log('执行')
		},
		methods: {
			maskClose() {
				this.$emit('maskClose')
				this.viewObj.hide()
			},
			btnClick() {
				this.viewObj.hide()
				this.$emit('btnClick')
			}
		}
	}
</script>

<style lang="scss">
	.mask{
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
		z-index:888;
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	.messBox{
		position: absolute;
		top: 300rpx;
		left: 50%;
		width:80%;
		padding:10rpx 0rpx;
		z-index:998;
		transform: translateX(-200%);
		.wrapBox{
			background-color: #fff;
			border-radius: 20rpx;
			padding:30rpx;
			.title{
				text-align:center;
				font-size: 32rpx;
				font-weight: bold;
			}
			.desc{
				height:400rpx;
				margin-top:20rpx;
				font-size: 30rpx;
			}
			.btn{
				width:70%;
				margin:20rpx auto;
				margin-top:40rpx;
				padding:20rpx 0px;
				text-align:center;
				background:#4884FF;
				border-radius: 34px;
				font-size: 30rpx;
				color:#fff;
			}
			.baColor {
				background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
			}
		}
	}
	
	.popup-content-show {
		animation: mymove 500ms;
		transform: translateX(-50%);
		
		// transform: scale(1);
		
	}
	
	@keyframes mymove {
		0% {
			transform: translateX(-200%);
			/*开始为原始大小*/
		}
		50% {
			transform: translateX(-30%);
		}
		100% {
			transform: translateX(-50%);
		}
	
	}
</style>
